import React, { Component } from 'react'
import echarts from 'echarts/lib/echarts'
import ReactEcharts from 'echarts-for-react'

class Home extends Component {
	getOption = () => {
		const option = {
			grid: {
				width: 600,
				height: 600,
			},
			title: {
				text: '红袖添香',
				subtext: '书籍分类',
				left: 'center',
				textStyle: {
					fontSize: 30,
				},
			},
			tooltip: {
				trigger: 'item',
			},
			legend: {
				orient: 'vertical',
				left: 'left',
			},
			series: [
				{
					name: 'Access From',
					type: 'pie',
					radius: '57%',
					center: ['50%', '50%'],
					data: [
						{ value: 387, name: '现代言情' },
						{ value: 284, name: '古代言情' },
						{ value: 62, name: '玄幻言情' },
						{ value: 19, name: '仙侠奇缘' },
						{ value: 4, name: '悬疑' },
						{ value: 63, name: '科幻空间' },
						{ value: 7, name: '游戏竞技' },
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		}
		return option
	}
	render() {
		return (
			<div>
				<ReactEcharts
					option={this.getOption()}
					style={{ width: 800, height: 480, marginLeft: 100 }}
				/>
			</div>
		)
	}
}

export default Home
